<template>
  <el-dialog width="700" @update:modelValue="$emit('update:modelValue', false)" :title="'竞标人列表('+props.item.name+')'" :modelValue="props.modelValue">
    <div class="tip-warning">
      <i  class="tipicon"><svg viewBox="64 64 896 896" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"></path></svg></i>
      项目用工人数{{props.item.limitNum}}人
    </div>
    <el-table @selection-change="handleSelectionChange" :data="tableData" border>
      <el-table-column align="center" type="selection" width="55" />
      <el-table-column align="center" property="name" label="姓名" width="120" />
      <el-table-column align="center" property="cardId" label="身份证号码" />
      <el-table-column  align="center" property="phone" label="手机号码" width="120" />
      <!--
        <el-table-column property="taskDesc" label="任务内容" width="120" />
        <el-table-column property="verifyTime" label="交付日期" width="120" />
        <el-table-column property="cost" label="服务金额（元）" width="120" />
        <el-table-column property="address" label="Address" show-overflow-tooltip />
      -->
    </el-table>

    <template #footer>
      <el-space>
        <el-button @click="$emit('update:modelValue', false)"> 取消 </el-button>
        <el-button type="primary" @click="submit"> 提交 </el-button>
      </el-space>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance() as ComponentInternalInstance

interface User {
  date: string
  name: string
  address: string
}
interface Props {
    modelValue: boolean;
    taskId: string;
    item:object;
}
const props = withDefaults(defineProps<Props>(), {
    modelValue: false,
    taskId: '',
    item:{}
});

const emit = defineEmits(['update:modelValue', 'update:onSuccess'])

const tableData = ref([])

const multipleSelection = ref<User[]>([])

const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}

const submit = async () => {

    if(multipleSelection.value.length != props.item.limitNum){
      proxy?.$modal.msgError(`选定的竞标人数与用工人数不相等!`);
      return ;
    }



   useRequest('/payment/taskEnroll/check', 'PUT', {
        data: { taskId: props.taskId, ids: multipleSelection.value.map(item => item.id) }
    }, {
        immediate: true,
        onSuccess: () => {
          proxy?.$modal.msgSuccess(`操作成功`);
          emit('update:modelValue', false);
          emit('onSuccess')
        }
    })


}

watch(() => props.modelValue, async open => {
    if (open) {
        const { response } = await useRequest('/payment/taskEnroll/list', 'GET', {
            params: { taskId: props.taskId}
        }, {
            immediate: true,
         })
         tableData.value = response?.value.rows
    }
})


</script>

<style>
  .tip-warning {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      color: rgba(0, 0, 0, .65);
      font-size: 12px;
      font-variant: tabular-nums;
      line-height: 1.5;
      list-style: none;
      margin-bottom: 5px;
      font-feature-settings: "tnum";
      position: relative;
      padding: 8px 15px 8px 37px;
      word-wrap: break-word;
      border-radius: 4px;
      background-color: #fffbe6;
      border: 1px solid #ffe58f;
  }

.tipicon {
    display: inline-block;
    color: inherit;
    font-style: normal;
    line-height: 0;
    text-align: center;
    text-transform: none;
    vertical-align: -0.125em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #faad14;
    position: absolute;
    top: 11.5px;
    left: 16px;
}

.el-overlay .el-overlay-dialog .el-dialog .el-dialog__body {
    padding: 5px !important;
}
</style>
